<template>
	<view class="bg">

		<!-- <view class="center"> -->
			<view class="flex-wrap flex-row-space-between" style="margin: 0 30rpx;">
				<view class="item1" v-for="(item,index) in list" >
					<view @click="vadio(item)" class="head" >
						  <!-- <image v-show="!item.imgLoaded" src="/static/logo/144x144.png" mode="aspectFit"/> -->
						<image  :src="item.images[0]" mode="aspectFill"></image>
					</view>
					<view class="item" @click="goTrends(item.id)">
						
						<view style="width: 100%;display: flex;justify-content: flex-end;" v-if="item.video">
							<image src="../../static/video.png" style="width: 50rpx; height: 50rpx; margin-top: -80rpx;" mode=""></image>
						</view>
						<view class="title">{{item.title}}</view>
						<view class="user">
							<view class="portrait">
								<image :src="item.technician_avatar" mode=""></image>
								<text style="margin-left: 10rpx;">{{item.technician_nickname}}</text>
							</view>							
							<view class="fabulous">
								<u-icon name="chat" color="#999" size="16"></u-icon>
								<text class="text-1">{{item.comment_count}}</text>
							</view>
						</view>
						<view class="address flex-row-flex-start">
							<u-icon name="map" color="#999999" size="14"></u-icon>
						{{item.technician_city}}
						</view>
					
						
					</view>
					
				</view>
			</view>
<view>
			<Tabbar :value='2' />
		</view>
			<!-- <custom-waterfalls-flow ref="waterfallsFlowRef" :value="list" @imageClick='vadio'>
				<template v-slot:default="item">
					<view class="item" @click="goTrends(item.id)">
						<view class="title">{{item.title}}</view>
						<view style="width: 100%;display: flex;justify-content: flex-end;" v-if="item.video">
							<image src="../../static/video.png" style="width: 50rpx; height: 50rpx; margin-top: -150rpx;" mode=""></image>
						</view>
						<view class="user">
							<view class="portrait">
								<image :src="item.technician_avatar" mode=""></image>
								<text style="margin-left: 10rpx;">{{item.technician_nickname}}</text>
							</view>							
							<view class="fabulous">
								<u-icon name="chat" color="#999" size="16"></u-icon>
								<text class="text-1">{{item.comment_count}}</text>
							</view>
						</view>
						<view class="address flex-row-flex-start">
							<image  src="/static/index/address.png" mode=""></image>
						{{item.technician_city}}
						</view>
					
						
					</view>
				</template>
			</custom-waterfalls-flow> -->
			
		<!-- </view> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					
				],
				page: 1,
				limit: 6,
				suo: true,
				status: 'loadmore',
				list1: [{
					name: '全部'
				}, {
					name: '关注'
				}],
				type:'all'
			}
		},
		onLoad() {
			this.page=1
			this.twoDynamic()
		},
		//下拉刷新
		onPullDownRefresh() {
			this.page=1
			this.suo = true
		this.twoDynamic()
		
		},
		
		onReachBottom() {
			if (this.suo) { //定义个小锁，当没有数据时锁住suo
				this.status = 'loading';
				this.page = ++this.page;
				// setTimeout(() => {
					this.twoDynamic()
				// }, 500)
			}
		},
		methods: {
			onSuccessImg(item) {
			    this.$set(item, 'imgLoaded', true)
			},
			onErrorImg(item) {
			    this.$set(item, 'imgLoaded', false)
			},
			goTrends(id){
				uni.navigateTo({
					url:'/pages/my/trendsDetile?id='+id
				})
			},
			twoDynamic() {
			
				this.$http.post('api/dynamic/list', {
					page: this.page,
					limit: this.limit,
					type:this.type
				}).then(res => {
					uni.stopPullDownRefresh()
					console.log("请求列表", res);
					if(this.page==1){
						// setTimeout(() => {
							
						// 	console.log("刷新");
						// }, 500)
						// this.list=[]
						this.list = res
						this.$refs.waterfallsFlowRef.refresh();
						
					}else{
						this.list = this.list.concat(res)
					}
					      this.list.forEach(item => {
					                   // item.url=item.image
									   // item.url=item.image
// 									   item.image=
// "https://yy.qingdaidaojia.com/uploads/admin/images/6a0c87c71b9d131c64d1865600e82979.jpg"
					                })
					
					// setTimeout(() => {
					// 	this.$refs.waterfallsFlowRef.refresh();
					// 	console.log("刷新");
					// }, 500)
					//在这里要进行一个判断，当后端传给我的数据小于每页的数据时就显示没有更多了
					if (res.length == '') {
						this.status = 'nomore';
						this.suo = false
					} else if (res.length < this.limit) {
						this.status = 'nomore';
						this.suo = false
					} else if (res.length = this.limit) {
						this.status = 'loadmore';
						this.suo = true
					}
					// setTimeout(() => {
					// 	this.$refs.waterfallsFlowRef.refresh();
					// 	console.log("刷新");
					// }, 500)

				})
			},
			click(e){
				console.log(e);
				if(e.name=='关注'){
					this.type='attention'
					
					this.page=1
					this.twoDynamic()
			
					
				}else{
					this.type='all'
					
					this.page=1
					this.twoDynamic()
			
				}
			},
			vadio(e){
				console.log(e);
				if(e.video){
					console.log('111');
					uni.navigateTo({
						url:'/pages/my/vido?video='+e.video
					})
				}else{
					uni.navigateTo({
						url:'/pages/my/trendsDetile?id='+e.id
					})
				}
			}


		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		background-color: #F6F8FA;
		padding-bottom: 120rpx;
		min-height: 100vh;

		.top {
			width: 100%;
			height: 250rpx;
			padding: 20rpx;
			background: linear-gradient(to bottom, #AFDDFF, #FFFFFF);
			display: flex;
			justify-content: space-between;
			flex-direction: column;
		}

		.hend {
			margin-top: 40rpx;

			.text1 {
				font-weight: 700;
				font-style: italic;
			}

			.text2 {
				font-size: 30rpx;
			}
		}

		.tabs {
			width: 100%;
			// width: 200rpx;
		}

		.center {
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
		}
		.item{
			min-height: 100rpx;
			padding: 20rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.user{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;
		}
		.fabulous{
			display: flex;
			font-size: 24rpx;
		}
		.portrait{
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #999;
			image{
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
			}
		}
		.label{
			font-size: 24rpx;
			color: #0B558A;
			background-color: #ECF7FF;
			margin-left: 10rpx;
		}
		.desc{
			margin-top: 10rpx;
		}
		
	}
	.address{
		margin-top: 10rpx;
		image{
			width: 32rpx;
			height: 32rpx;
		}
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	
	.item1{
		margin-top: 20rpx;
		width: 336rpx;
		// height: 418rpx;
		background: #FFFFFF;
		border-radius:20rpx;
	}
	.head{
		background: #F7F7FF;
		position: relative;
		width: 336rpx;
		height: 448rpx;
		border-radius:20rpx;
		// background-image: url('../../static/logo/144x144.png');
		image{
			width: 100%;
			height: 100%;
			border-radius:20rpx;
		
			
		}
	}
	
	
</style>
